import React, { useState, useEffect } from 'react'
import { Card, Table, Button, Checkbox, Tag, Modal, Input, Drawer, Form, Switch, InputNumber, Upload, message } from 'antd'
import { PageHeaderWrapper } from "@ant-design/pro-layout";
import { ExclamationCircleOutlined } from '@ant-design/icons'
import request from '@/utils/request'
import Save from './save'


const { confirm } = Modal;

export default () => {
    const [selectedKeys, setSelectedKeys] = useState([]);
    const [tableData, setTableData] = useState({ list: [], total: 0 })
    const [visbale, setVisable] = useState(false)
    const [id, setId] = useState(0)
    const [saveForm] = Form.useForm()
    const [searchForm] = Form.useForm()



    const rowSelection = {
        selectedRowKeys: selectedKeys,
        onChange: (selectedRowKeys: any) => {
            setSelectedKeys(selectedRowKeys)
        },
    };
    const columns: any = [
        {
            title: '品牌名称',
            dataIndex: 'title',
            render: (text: any) => text,
        },
        {
            title: '图片',
            dataIndex: 'logo',
            render: (text: any) => <img src={text} style={{ width: "65px" }} />,
            align: "center",
        },
        {
            title: '品牌首字母',
            dataIndex: 'initial',
            render: (text: any) => text,
            align: "center",
        },
        {
            title: '是否推荐',
            dataIndex: 'is_recommend',
            render: (text: any) => <Checkbox checked={text} />,
            align: "center",
            width: "160px",
        },
        {
            title: '排序',
            width: "80px",
            dataIndex: 'sort',
            align: "center",
            render: (text: any) => <Tag color="blue">{text}</Tag>
        },
        {
            title: '操作',
            width: "200px",
            align: "center",
            render: (text: any, record: any) => (
                <>
                    <Button size="small" type="primary" ghost style={{ marginRight: "6px" }} onClick={() => {
                        setId(record.id)
                        setVisable(true)
                        request(`/goods/brand/${record.id}`).then((result) => {
                            const data = result.data;
                            data.upload = [];
                            if (data.logo) {
                                data.upload = [{
                                    uid: new Date().getTime(),
                                    name: data.logo.substr(-15, 15),
                                    url: data.logo
                                }];
                            }
                            saveForm.setFieldsValue(data)
                        })

                    }}>修改</Button>

                    <Button size="small" danger onClick={() => {
                        destroy([record.id])
                    }}>删除</Button>
                </>
            ),
        },
    ];

    const getList = (params = {}) => {
        request(`/goods/brand-list`, { params }).then((result) => {
            const { list, total } = result.data
            setTableData({ list, total })
        })
    }

    const destroy = (ids: any[]) => {
        confirm({
            title: 'Do you Want to delete these items?',
            icon: <ExclamationCircleOutlined />,
            onOk() {
                request(`/goods/brand-destroy`, {
                    method: "Delete",
                    params: { ids }
                }).then((result) => {
                    message.success("删除成功")
                    getList()
                })
            }
        });
    }
    useEffect(() => {
        getList()
    }, [])

    const ToolBtn = () => {
        return (
            <div>
                <div style={{ float: "left" }}>
                    <Button type="primary" danger style={{ marginRight: "8px" }} onClick={() => {
                        const tableIds = tableData.list.map((item: any) => item.id)

                        let selectIds: [] = [];
                        selectedKeys.forEach((item) => {
                            if (tableIds.includes(item)) {
                                selectIds.push(item)
                            }
                        })

                        if (selectIds.length < 1) {
                            message.warn("请选择你要操作的选项")
                            return
                        }

                        destroy(selectIds)
                    }}>批量删除</Button>

                    <Button type="primary" ghost onClick={() => {
                        saveForm.resetFields()
                        setVisable(true)
                        setId(0)
                    }}>添加品牌</Button>
                </div>
                <div style={{ float: "right" }}>
                    <Form
                        layout="inline"
                        onFinish={(values) => {
                            getList(values)
                        }}
                        form={searchForm}
                    >
                        <Form.Item
                            name="searchWord"
                        >
                            <Input placeholder="请输入品牌名称" />
                        </Form.Item>
                        <Form.Item>
                            <Button type="primary" htmlType="submit">搜索</Button>
                        </Form.Item>
                    </Form>
                </div>
                <div style={{ clear: "both" }} />
            </div>
        );
    }


    const tableChange = (pagination: any, filters: any, sorter: any, extra: any) => {
        const params = { page: pagination.current };
        getList(params)
    }
    return (
        <PageHeaderWrapper title={false}>
            <Card title={<ToolBtn />} style={{ height: "100%" }}>
                <Table
                    rowKey="id"
                    columns={columns} dataSource={tableData.list}
                    rowSelection={rowSelection} pagination={{ total: tableData.total }}
                    onChange={tableChange}
                />
                <Save getList={getList} visbale={visbale} close={() => {
                    setVisable(false)
                }} id={id} form={saveForm} />
            </Card>
        </PageHeaderWrapper >
    );
}